<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的项目圈-材料采购</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/myProject.css"/>
	</head>
	<body class="materialPurchaseBox">
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a class="active">项目圈</a>
					</li>
					<li>
						<a>材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe643;</span>
						<span class="infoCenterText">消息中心</span>
						<span class="remindCircle"></span>
					</a>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
					
				</div>	
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
		
		<!--公共侧边栏 start-->
		<div class="commonSide">
			<div class="sideTitle">项目圈</div>
			<ul class="sideMenu">
				<li class="active">
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe611;</span>
						<span>我的项目</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe60e;</span>
						<span>我的材料库</span>
					</a>
				</li>
				<li>
					<a href="javascript:void(0);">
						<span class="iconfont">&#xe610;</span>
						<span>我的收藏</span>
					</a>
				</li>
			</ul>
		</div>
		<!--公共侧边栏 end-->
		
		<!--内容 start-->
		<div class="content">
			<div class="contentTop">
				<a class="contentBack">
					<span class="iconfont">&#xe60a;</span>
					<span class="backText">返回</span>
				</a>
				<span class="contentSever">|</span>
				<div class="contentTitle">侨乡物业项目</div>
				<span class="contentTitleSever">></span>
				<div class="contentSecondTitle">材料采购</div>
				<div class="clear"></div>
			</div>
			
			<!--项目圈内容 start-->
			<div class="materialPurchase">
				<div class="projectBox">				
					<button class="createPurchaseBill greenBtn">生成采购清单</button>
					<ul class="materialList">
						<li class="listDec">
							<div class="materialType">材料类型</div>
							<div class="materialArea">用料总面积</div>
							<div class="materialImg">图片</div>
							<div class="controlRequest">
								<div class="cRFirstMenu">控制要求</div>
								<div class="cRSecondMenu">
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">甲醛</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">TOVC</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">甲苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">二甲苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="clear"></div>
								</div>
							</div>
							<div class="offerWay">供应渠道</div>
							<div class="brand">品牌</div>
							<div class="materialModel">型号</div>
							<div class="materialControl">操作</div>
							<div class="clear"></div>
						</li>
						<li class="materialDec">
							<div class="materialType">强化木地板</div>
							<div class="materialArea">16.5</div>
							<div class="materialImg">
								<img src="../img/materialImg.jpg"/>
							</div>
							<div class="controlRequest">
								<div class="materialContentList">
									<div class="wid20 fl tac">
										<p class="materialContent">0.3</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">0.4</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">0.3</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">0.4</p>
									</div>
									<div class="wid20 fl tac">
										<p class="materialContent">0.3</p>
									</div>
									<div class="clear"></div>
								</div>
							</div>
							<div class="offerWay">
								<template>
									<el-select placeholder="甲供" v-model="buildingType1">
									    <el-option
									      v-for="buildingType in buildingTypes"
									      :label="buildingType.label"
									      :value="buildingType.value"
									      :key="buildingType">
									    </el-option>
									</el-select>
								</template>
							</div>
							<div class="brand">德尔</div>
							<div class="materialModel">GB800</div>
							<div class="materialControl">
								<a href="javascript:void(0);" class=""><el-button type="text" @click="dialogTableVisible = true" class="modalControl">采购</el-button></a>
							</div>
							<div class="clear"></div>
						</li>
					</ul>
					
					<!--分页器 start-->
					<div class="block">
						<div class="fr">
							 <span class="demonstration fl">调整每页显示条数</span>
						    <el-pagination
						      @size-change="handleSizeChange"
						      @current-change="handleCurrentChange"
						      :current-page="1"
						      :page-sizes="[10, 20, 30, 40]"
						      :page-size="10"
						      layout="sizes, prev, pager, next"
						      :total="50"
						      class="fl">
						    </el-pagination>
						    <div class="clear"></div>
						</div>
					   <div class="clear"></div>
					</div>
					<!--分页器 end-->
				</div>		
				
				
				
				<!--Vue模态框  start-->
				<el-dialog v-model="dialogTableVisible" class="vueModalBox">
				  	<div class="materialListSelect">
						<div class="menu active">共享材料库</div>
						<div class="menu wrongActive">我的材料库</div>
						<div class="menu wrongActive">企业材料库</div>
						<div class="menu wrongActive">我的收藏</div>
						<div class="clear"></div>
					</div>
					<div class="priceAndLevelTitle">
						<div class="levelBox">
							<label>星级</label>
							<div class="levelSelectBox selectComponent">
								<template>
									<el-select placeholder="星级类别" v-model="star">
									    <el-option
									      	v-for="star in starList"
									      	:label="star.label"
									      	:value="star.value"
									        :key="star">
									    </el-option>
									</el-select>
								</template>
							</div>
							<div class="levelSelectBox selectComponent">
								<template>
									<el-select placeholder="等级" v-model="level">
									    <el-option
									      	v-for="level in levelList"
									      	:label="level.label"
									      	:value="level.value"
									        :key="level">
									    </el-option>
									</el-select>
								</template>
							</div>
							<el-input class="levelInput" placeholder="输入关键词"></el-input>
							<button class="levelSearchBtn">搜索</button>
						</div>
						<!--<div class="fr" style="line-height: 50px;">
							<span class="iconfont mr10" style="cursor: pointer;">&#xe790;</span>
							<span class="iconfont" style="cursor: pointer;">&#xe6e5;</span>
						</div>-->
						<div class="clear"></div>
					</div>
					<ul class="modalMaterialDec">
						<li class="listDec">
							<div class="materialControl">&nbsp;</div>
							<div class="materialBrand">品牌</div>
							<div class="materialType">材料类型</div>
							<div class="materialImg">图片</div>
							<div class="materialModel">型号</div>
							<div class="controlRequest">
								<div class="cRFirstMenu">控制要求</div>
								<div class="cRSecondMenu">
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">甲醛</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">TOVC</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">甲苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="wid20 fl tac">
										<p class="cRSecondMenuName">二甲苯</p>
										<p>（mg/m2-h）</p>
									</div>
									<div class="clear"></div>
								</div>
							</div>
							<div class="clear"></div>
						</li>
						<ul class="tab">
							<li class="materialDec" v-for="(shareList,key) in shareForm">
								<div class="materialControl">
									<el-radio class="radio" v-model="radio1" :label="key">&nbsp;</el-radio>
								</div>
								<div class="materialBrand">{{shareList.brand}}</div>
								<div class="materialType">{{shareList.type}}</div>
								<div class="materialImg"><img v-bind:src="shareList.src"></div>
								<div class="materialModel">{{shareList.model}}</div>
								<div class="controlRequest">
									<div class="cRSecondMenu">
										<div class="wid20 fl tac">
										<p class="materialContent">{{shareList.jiaquan}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{shareList.TOVC}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{shareList.ben}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{shareList.jiaben}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{shareList.erjiaben}}</p>
										</div>
										<div class="clear"></div>
									</div>
								</div>
								<div class="clear"></div>
							</li>	
						</ul>
						<ul class="tab hidden">
							<li class="materialDec" v-for="(myList,key) in myForm">
								<div class="materialControl">
									<el-radio class="radio" v-model="radio2" :label="key">&nbsp;</el-radio>
								</div>
								<div class="materialBrand">{{myList.brand}}</div>
								<div class="materialType">{{myList.type}}</div>
								<div class="materialImg"><img v-bind:src="myList.src"></div>
								<div class="materialModel">{{myList.model}}</div>
								<div class="controlRequest">
									<div class="cRSecondMenu">
										<div class="wid20 fl tac">
										<p class="materialContent">{{myList.jiaquan}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{myList.TOVC}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{myList.ben}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{myList.jiaben}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{myList.erjiaben}}</p>
										</div>
										<div class="clear"></div>
									</div>
								</div>
								<div class="clear"></div>
							</li>
						</ul>
						<ul class="tab hidden">
							<li class="materialDec" v-for="(companyList,key) in companyForm">
								<div class="materialControl">
									<el-radio class="radio" v-model="radio3" :label="key">&nbsp;</el-radio>
								</div>
								<div class="materialBrand">{{companyList.brand}}</div>
								<div class="materialType">{{companyList.type}}</div>
								<div class="materialImg"><img v-bind:src="companyList.src"></div>
								<div class="materialModel">{{companyList.model}}</div>
								<div class="controlRequest">
									<div class="cRSecondMenu">
										<div class="wid20 fl tac">
										<p class="materialContent">{{companyList.jiaquan}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{companyList.TOVC}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{companyList.ben}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{companyList.jiaben}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{companyList.erjiaben}}</p>
										</div>
										<div class="clear"></div>
									</div>
								</div>
								<div class="clear"></div>
							</li>
						</ul>
						<ul class="tab hidden">
							<li class="materialDec" v-for="(hideList,key) in hideForm">
								<div class="materialControl">
									<el-radio class="radio" v-model="radio4" :label="key">&nbsp;</el-radio>
								</div>
								<div class="materialBrand">{{hideList.brand}}</div>
								<div class="materialType">{{hideList.type}}</div>
								<div class="materialImg"><img v-bind:src="hideList.src"></div>
								<div class="materialModel">{{hideList.model}}</div>
								<div class="controlRequest">
									<div class="cRSecondMenu">
										<div class="wid20 fl tac">
										<p class="materialContent">{{hideList.jiaquan}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{hideList.TOVC}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{hideList.ben}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{hideList.jiaben}}</p>
										</div>
										<div class="wid20 fl tac">
											<p class="materialContent">{{hideList.erjiaben}}</p>
										</div>
										<div class="clear"></div>
									</div>
								</div>
								<div class="clear"></div>
							</li>
						</ul>
						
					</ul>
					<div class="buttonBox">
						<a class="whiteLargerBtn mr20" @click="dialogTableVisible = false" style="border: 0;">取消</a>
						<button class="greenLargerBtn" @click="successful" style="width: 80px;">确定</button>
					</div>
				</el-dialog>
				<!--Vue模态框  end-->
			</div>
			<!--项目圈内容 end-->
			
		</div>
		<!--内容 end-->
		
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			//获取content宽度
			var contentWidth = $(window).innerWidth() - 180;
			$('.content').css('width',contentWidth + 'px');
			//获取content最小高度
			var contentMinHeight = $(window).innerHeight() - 60;
			$('.content').css('min-height',contentMinHeight + 'px');
			
			//获取projectBox最小高度
			var projectBoxMinHeight = $(window).innerHeight() - 170;
			$('.projectBox').css('min-height',projectBoxMinHeight + 'px');
		
			//模态框中的选项菜单控制
			$('.modalControl').click(function(){
				$('.vueModalBox .menu').each(function(index){
					$(this).click(function(){
						$('.menu').removeClass('active').addClass('wrongActive').eq(index).removeClass('wrongActive').addClass('active');
						$('.modalMaterialDec .tab').addClass('hidden').eq(index).removeClass('hidden');
					});
				});
			});
			
		});
		
		var loginInfo = new Vue({
			el:'.loginInfo'
		});
		
		var materialPurchase = new Vue({
			el:'.materialPurchase',
			data:function(){
				return{
					radio1:'1',
					radio2:'2',
					radio3:'3',
					radio4:'4',
					buildingTypes: [{
			          value: '选项1',
			          label: 'A型'
			        }, {
			          value: '选项2',
			          label: 'B型'
			        }, {
			          value: '选项3',
			          label: 'C型'
			        }, {
			          value: '选项4',
			          label: 'D型'
			        }],
			        buildingType1:'',
			        buildingType2:'',
			        buildingType3:'',
			        currentPage:'1',
			        gridData: [{
			          date: '2016-05-02',
			          name: '王小虎',
			          address: '上海市普陀区金沙江路 1518 弄'
			        }, {
			          date: '2016-05-04',
			          name: '王小虎',
			          address: '上海市普陀区金沙江路 1518 弄'
			        }, {
			          date: '2016-05-01',
			          name: '王小虎',
			          address: '上海市普陀区金沙江路 1518 弄'
			        }, {
			          date: '2016-05-03',
			          name: '王小虎',
			          address: '上海市普陀区金沙江路 1518 弄'
			        }],
			        dialogTableVisible: false,
			        starList: [{
			          value: '选项1',
			          label: '1级'
			        }, {
			          value: '选项2',
			          label: '2级'
			        }, {
			          value: '选项3',
			          label: '3级'
			        }, {
			          value: '选项4',
			          label: '4级'
			        }],
			        star:'',
			        levelList: [{
			          value: '选项1',
			          label: '1级'
			        }, {
			          value: '选项2',
			          label: '2级'
			        }, {
			          value: '选项3',
			          label: '3级'
			        }, {
			          value: '选项4',
			          label: '4级'
			        }],
			        level:'',
			        shareForm:[
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	}
			        ],
			        myForm:[
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	},
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	}
			        ],
			        companyForm:[
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	},
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	},
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	}
			        ],
			        hideForm:[
			        	{
			        		brand:'德尔',
			        		type:'材料类型',
			        		src:'../img/materialImg.jpg',
			        		model:'型号',
			        		jiaquan:'0.22',
			        		TOVC:'0.5',
			        		ben:'0.8',
			        		jiaben:'0.5',
			        		erjiaben:'0.7'
			        	},
			        ],
				}
			},
			methods:{
				handleSizeChange(val) {
			        console.log(`每页 ${val} 条`);
			    },
			    handleCurrentChange(val) {
			        this.currentPage = val;
			        console.log(`当前页: ${val}`);
			    },
			    tabHandleExchange:function(){
			    	
			    },
			    successful:function(){
			    	this.dialogTableVisible = false,
			    	this.$message({
			          	message: '采购成功！',
			          	type: 'success'
			       });
			    }
			}
		});
	</script>
</html>
